import _ from 'lodash';
import * as React from 'react';
import {observer} from 'mobx-react';
import {TreeSelect, Form} from 'antd';
import {toJSDeep} from '../../../../common/store/Store';
import './TreeSelectedStyle.less';

const FormItem = Form.Item;

@observer
export class AdTreeSelect extends React.Component<{label:string, filedName:string, labelCol:any, wrapperCol:any, store:any, treeData:any, onChange:Function },any> {
    onChange = (value, label?, extra?) => {
        this.props.onChange(value);
    }

    getPopupContainer:any = function(className) {
        return function(){
            return document.querySelector(`.${className}`);
        }
    }

    render() {
        let { store, treeData, filedName, label, labelCol, wrapperCol } = this.props;
        const item = store.fields[filedName];
        const className = _.uniqueId(`${filedName}_`);

        const tProps = {
            treeData: treeData,
            value: toJSDeep(item.value),
            onChange: this.onChange,
            multiple: true,
            treeCheckable: true,
            placeholder: '请选择区域',
            treeNodeFilterProp:'label',
            dropdownStyle:{ maxHeight: 400, overflow: 'auto' , width: '100%' },
            getPopupContainer:this.getPopupContainer(className),
            style:{width:'100%'}
        };

        return (
            <FormItem className = {className}
                label={label}
                labelCol={labelCol}
                wrapperCol={wrapperCol}
                hasFeedback = {item.hasFeedback}
                required = {item.required}
                help = {item.help}
                validateStatus = {item.validateStatus}>
                <TreeSelect {...tProps} />
            </FormItem>
        )
    }
}
